<%@ page language="java" contentType="text/html; charset=UTF-8"
   import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta charset="UTF-8">
		<title>图表展示</title>
		<link rel="stylesheet" href="../css/bootstrap.css" />
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<link href="../css/animate.css" rel="stylesheet">
		<link href="../css/style.css" rel="stylesheet">
		<link href="../fonts/css/font-awesome.css" rel="stylesheet">
	</head>

	<body>
		<div id="wrapper">
			<!--左侧导航栏-->
			<nav class="navbar-default navbar-static-side" role="navigation">
				<div class="sidebar-collapse">
					<ul class="nav metismenu" id="side-menu">
						<li>
							<a href="#"><i class="fa fa-th-large"></i> <span class="nav-label">发帖管理</span> <span class="fa arrow"></span></a>
							<ul class="nav nav-second-level collapse">
								<li>
									<a href="findingadmin.jsp">寻帖审核</a>
								</li>
								<li>
									<a href="main.jsp">失物审核</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="#"><i class="fa fa-th-large"></i> <span class="nav-label">信息管理</span> <span class="fa arrow"></span></a>
							<ul class="nav nav-second-level collapse">
								<li>
									<a href="locationadmin.jsp">招领点管理</a>
								</li>
								<li>
									<a href="charts.jsp">图表展示</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="#"><i class="fa fa-th-large"></i> <span class="nav-label">管理</span> <span class="fa arrow"></span></a>
							<ul class="nav nav-second-level collapse">
								<li>
									<a href="editor.jsp">发布公告</a>
								</li>
								<li>
									<a href="data.jsp">数据备份</a>
								</li>
							</ul>
						</li>
					</ul>

				</div>
			</nav>
			<!--
            	作者：1462859532@qq.com
            	时间：2017-03-29
            	描述：右侧导航栏
            -->
			<div id="page-wrapper" class="gray-bg">
				<div class="row border-bottom">
					<nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
						<div class="navbar-header">
							<a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
						</div>
						<ul class="nav navbar-top-links navbar-right">
							<li>
								<span class="m-r-sm text-muted welcome-message">欢迎来到系统管理员</span>
							</li>
							<li>
								<a href="login.jsp">
									<i class="fa fa-sign-out"></i> 注销
								</a>
							</li>
						</ul>
					</nav>
				</div>
				<div class="row wrapper border-bottom white-bg page-heading">
					<div class="col-lg-10">
						<ol class="breadcrumb">
							<li>
								<a>信息管理</a>
							</li>
							<li class="active">
								<strong>图表展示</strong>
							</li>
						</ol>
					</div>
				</div>
				<div class="wrapper wrapper-content  animated fadeInRight article">
					<div class="row">
						<div class="col-lg-6">
						    <p>失物信息图表
							<div id="main" style="width: 100%;height:300px;"></div>
						</div>
						<div class="col-lg-6">
						    <p>寻物信息图表
							<div id="main1" style="width: 100%;height:300px;"></div>
						</div>
					</div>
					<div class="row">
					      <div style="margin:0 auto;text-align:center">
					       <p>招领记录图表
							<div id="main2" style="width: 100%;height:300px;"></div>
					      </div>
					
					</div>
				</div>

			</div>
		</div>

		<script src="../js/jquery.js"></script>
		<script src="../js/bootstrap.min.js"></script>
		<script src="../js/jquery.metisMenu.js"></script>
		<script src="../js/jquery.slimscroll.min.js"></script>

		<!-- Custom and plugin javascript -->
		<script src="../js/inspinia.js"></script>
		<script src="../js/pace.min.js"></script>
		<!--flot-->
		<script src="../js/echarts.js"></script>
		<script type="text/javascript">
		    $(function(){
		    	var myChart = echarts.init(document.getElementById('main'));
		    	var myChart1 = echarts.init(document.getElementById('main1'));
		    	var myChart2 = echarts.init(document.getElementById('main2'));
		    	$.ajax({
		    		type:"post",
		    		url:"../admin/losingdata.action",
		    		dataType:"json",
		    		success:function(map){
		    			// 指定图表的配置项和数据		
		    			option = {
			    				tooltip : {
			    					trigger : 'item',
			    					formatter : "{a} <br/>{b}: {c} ({d}%)"
			    				},
			    				legend : {
			    					orient : 'vertical',
			    					x : 'left',
			    					data :['身份证','银行卡','一卡通','公交卡','衣物','书本','其他']
			    				},
			    				series : [ {
			    					name : '访问来源',
			    					type : 'pie',
			    					radius : [ '50%', '70%' ],
			    					avoidLabelOverlap : false,
			    					label : {
			    						normal : {
			    							show : false,
			    							position : 'center'
			    						},
			    						emphasis : {
			    							show : true,
			    							textStyle : {
			    								fontSize : '30',
			    								fontWeight : 'bold'
			    							}
			    						}
			    					},
			    					labelLine : {
			    						normal : {
			    							show : false
			    						}
			    					},
			    					data : (function(){	 
		                                var res = [];
		                                var len = map.length;
		                                while (len--) {
		                                res.push({
		                                name: map[len].itemsName,          
		                                value: map[len].itemsCount	
		                                });
		                                }
		                                return res;
		                                })()
			    				} ]
			    			};
		    			// 使用刚指定的配置项和数据显示图表。
		    			myChart.setOption(option);  			
		    		}
		    	})
		    	
		    	$.ajax({
		    		type:"post",
		    		url:"../admin/pickingdata.action",
		    		dataType:"json",
		    		success:function(map){
		    			// 指定图表的配置项和数据		
		    			option1 = {
			    				tooltip : {
			    					trigger : 'item',
			    					formatter : "{a} <br/>{b}: {c} ({d}%)"
			    				},
			    				legend : {
			    					orient : 'vertical',
			    					x : 'left',
			    					data :['身份证','银行卡','一卡通','公交卡','衣物','书本','其他']
			    				},
			    				series : [ {
			    					name : '访问来源',
			    					type : 'pie',
			    					radius : [ '50%', '70%' ],
			    					avoidLabelOverlap : false,
			    					label : {
			    						normal : {
			    							show : false,
			    							position : 'center'
			    						},
			    						emphasis : {
			    							show : true,
			    							textStyle : {
			    								fontSize : '30',
			    								fontWeight : 'bold'
			    							}
			    						}
			    					},
			    					labelLine : {
			    						normal : {
			    							show : false
			    						}
			    					},
			    					data : (function(){	 
		                                var res = [];
		                                var len = map.length;
		                                while (len--) {
		                                res.push({
		                                name: map[len].itemsName,          
		                                value: map[len].itemsCount	
		                                });
		                                }
		                                return res;
		                                })()
			    				} ]
			    			};
		    			// 使用刚指定的配置项和数据显示图表。
		    			myChart1.setOption(option1);  			
		    		}
		    	})
		    	$.ajax({
		    		type:"post",
		    		url:"../admin/findingdata.action",
		    		dataType:"json",
		    		success:function(map){
		    			// 指定图表的配置项和数据		
		    			option2 = {
			    				tooltip : {
			    					trigger : 'item',
			    					formatter : "{a} <br/>{b}: {c} ({d}%)"
			    				},
			    				legend : {
			    					orient : 'vertical',
			    					x : 'left',
			    					data :['身份证','银行卡','一卡通','公交卡','衣物','书本','其他']
			    				},
			    				series : [ {
			    					name : '访问来源',
			    					type : 'pie',
			    					radius : [ '50%', '70%' ],
			    					avoidLabelOverlap : false,
			    					label : {
			    						normal : {
			    							show : false,
			    							position : 'center'
			    						},
			    						emphasis : {
			    							show : true,
			    							textStyle : {
			    								fontSize : '30',
			    								fontWeight : 'bold'
			    							}
			    						}
			    					},
			    					labelLine : {
			    						normal : {
			    							show : false
			    						}
			    					},
			    					data : (function(){	 
		                                var res = [];
		                                var len = map.length;
		                                while (len--) {
		                                res.push({
		                                name: map[len].itemsName,          
		                                value: map[len].itemsCount	
		                                });
		                                }
		                                return res;
		                                })()
			    				} ]
			    			};
		    			// 使用刚指定的配置项和数据显示图表。
		    			myChart2.setOption(option2);  			
		    		}
		    	})
		    })
			// 基于准备好的dom，初始化echarts实例
			

			

			

			
		</script>
	</body>

</html>